<template>
  <div class="hotWord">
    <h3>热门搜索</h3>
    <ul>
      <li
        v-for="(hotWord, index) in hotWords"
        :key="index"
        @click="searchHotWord(hotWord.first)"
      >
        {{ hotWord.first }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotWords: null,
    };
  },
  methods: {
    searchHotWord(word) {
      this.$router.push({
        path: "/searchlist",
        query: {
          word,
        },
      });
    },
  },
  created() {
    this.axios.get("https://apis.netstart.cn/music/search/hot").then((res) => {
      this.hotWords = res.data.result.hots;
    });
  },
};
</script>

<style lang="less" scoped>
.hotWord {
  display: flex;
  flex-direction: column;
  // align-items: flex-start;
  width: 95vw;
  margin: 3vh auto;
  text-align: left;

  h3 {
    margin-bottom: 10px;
    font-size: 13px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      max-width: 30vw;
      padding:3px 10px;
      border:1px solid #e7e8ec;
      border-radius: 20px;
      font-size: 15px;
      margin-right:10px;
      margin-bottom:10px;

      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
</style>